<% User user = (User) session.getAttribute("user"); %>
<%@ page import="com.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>森饰管理系统</title>
    <!-- Common plugins -->
    <link href="${pageContext.request.contextPath}../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/pace.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}../../static/css/nanoscroller.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}../../static/css/metismenu.min.css">
    <link href="${pageContext.request.contextPath}../../static/css/c3.min.css" rel="stylesheet">
    <!-- dataTables -->
    <link href="${pageContext.request.contextPath}../../static/css/jquery.datatables.min.css" rel="stylesheet"
          type="text/css">
    <link href="${pageContext.request.contextPath}../../static/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <!--template css-->
    <link href="${pageContext.request.contextPath}./../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <script src="${pageContext.request.contextPath}../../static/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}../../static/js/respond.min.js"></script>

</head>

<body>
<!--top bar start-->
<div class="top-bar light-top-bar"><!--by default top bar is dark, add .light-top-bar class to make it light-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">
                <a href="index.html" class="admin-logo">
                    <h1><img src="${pageContext.request.contextPath}../../static/picture/logo-dark.png" alt=""></h1>
                </a>
                <div class="left-nav-toggle visible-xs visible-sm">
                    <a href="">
                        <i class="glyphicon glyphicon-menu-hamburger"></i>
                    </a>
                </div><!--end nav toggle icon-->
                <!--start search form-->
                <div class="search-form hidden-xs">
                    <form>
                        <input type="text" class="form-control" placeholder="Search for...">
                        <button type="button" class="btn-search"><i class="fa fa-search"></i></button>
                    </form>
                </div>
                <!--end search form-->
            </div>
            <div class="col-xs-6">
                <ul class="list-inline top-right-nav">
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-envelope"></i>
                            <span class="badge badge-warning">4</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a href="#" class="pull-right text-muted">
                                    <small>View
                                        All
                                    </small>
                                </a> Messages
                                </div>
                                <div class="scrollDiv">

                                    <div class="notification-list">
                                        <a href="javascript: void(0);" class="clearfix">
                                                <span class="notification-icon">
                                                    <img src="${pageContext.request.contextPath}../../static/picture/avtar-2.jpg"
                                                         alt=""
                                                         class="img-circle" width="50">
                                                </span>
                                            <span class="notification-title">John Doe <label
                                                    class="label label-primary pull-right">Office</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a href="javascript: void(0);" class="clearfix">
                                                <span class="notification-icon">
                                                    <img src="${pageContext.request.contextPath}../../static/picture/avtar-3.jpg"
                                                         alt=""
                                                         class="img-circle" width="50">
                                                </span>
                                            <span class="notification-title">Emily Doe  <label
                                                    class="label label-info pull-right">Marketing</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a href="javascript: void(0);" class="clearfix">
                                                <span class="notification-icon">
                                                    <img src="${pageContext.request.contextPath}../../static/picture/avtar-4.jpg"
                                                         alt=""
                                                         class="img-circle" width="50">
                                                </span>
                                            <span class="notification-title">Michael Clark <label
                                                    class="label label-warning pull-right">Support</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a href="javascript: void(0);" class="clearfix">
                                                <span class="notification-icon">
                                                    <img src="${pageContext.request.contextPath}../../static/picture/avtar-5.jpg"
                                                         alt=""
                                                         class="img-circle" width="50">
                                                </span>
                                            <span class="notification-title">Ronaldo <label
                                                    class="label label-success pull-right">Metting</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-bell"></i>
                            <span class="badge badge-danger">6</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a href="#" class="pull-right text-muted">
                                    <small>View
                                        All
                                    </small>
                                </a> Notifications
                                </div>
                                <div class="scrollDiv">
                                    <div class="notification-list">
                                        <a href="javascript: void(0);" class="clearfix">
                                            <span class="notification-icon"><i
                                                    class="icon-cloud-upload text-primary"></i></span>
                                            <span class="notification-title">Upload Complete</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a href="javascript: void(0);" class="clearfix">
                                            <span class="notification-icon"><i
                                                    class="icon-info text-warning"></i></span>
                                            <span class="notification-title">Storage Space low</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a href="javascript: void(0);" class="clearfix">
                                            <span class="notification-icon"><i
                                                    class="icon-check text-success"></i></span>
                                            <span class="notification-title">Project Task Complete </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="javascript: void(0);" class="right-sidebar-toggle"><i
                                class="glyphicon glyphicon-align-right"></i></a>
                    </li>
                    <li class="dropdown avtar-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="${pageContext.request.contextPath}../../static/picture/avtar-1.jpg"
                                 class="img-circle" width="30" alt="">

                        </a>
                        <ul class="dropdown-menu top-dropdown">
                            <li><a href="javascript: void(0);"><i class="icon-bell"></i> Activities</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-user"></i> Profile</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-settings"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="javascript: void(0);"><i class="icon-logout"></i> Logout</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- top bar end-->
<!--right side bar panel-->
<nav id="right-sidebar-toggle" class="right_sidebar">
    <div class="nano">
        <div class="nano-content">
            <div>
                <!-- Nav tabs -->
                <ul class="list-inline nav-tab-panel clearfix" role="tablist">
                    <li role="presentation" class="active"><a href="#projects" aria-controls="projects" role="tab"
                                                              data-toggle="tab">Projects</a></li>
                    <li role="presentation"><a href="#contacts" aria-controls="contacts" role="tab" data-toggle="tab">Contacts</a>
                    </li>

                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="projects">
                        <ul class="sidebar-list">
                            <li class="sidebar-title">
                                <h3 class="font-100"> Current projects</h3>
                                <small>There are <strong>7</strong> Current project</small>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 42%;" class="progress-bar progress-bar-warning"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 12%;" class="progress-bar progress-bar-danger"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Company</span>
                                    <h4>Website Re-design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 84%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 84%;" class="progress-bar progress-bar-success"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Metting</span>
                                    <h4>Business Consultancy</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 54%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 54%;" class="progress-bar progress-bar-info"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 42%;" class="progress-bar progress-bar-warning"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 12%;" class="progress-bar progress-bar-danger"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="contacts">

                        <ul class="list-unstyled sidebar-contact-list">
                            <li class="clearfix">
                                <a href="#" class="media-box">
                                        <span class="pull-right">
                                            <span class="circle circle-success circle-lg"></span>
                                        </span>
                                    <span class="pull-left">
                                            <!-- Contact avatar-->

                   <img src="${pageContext.request.contextPath}../../static/picture/avtar-1.jpg" alt="user"
                        class="media-box-object img-circle" width="50">

                   <img src="../../static/picture/avtar-1.jpg" alt="user"
                        class="media-box-object img-circle" width="50">

                                        </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                            <span class="media-box-heading">
                                                <strong>Angelina</strong>
                                                <br>
                                                <small class="text-muted">Designer</small>
                                            </span>
                                        </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a href="#" class="media-box">
                                        <span class="pull-right">
                                            <span class="circle circle-success circle-lg"></span>
                                        </span>
                                    <span class="pull-left">
                                            <!-- Contact avatar-->

                    <img src="${pageContext.request.contextPath}../../static/picture/avtar-2.jpg" alt="user"
                         class="media-box-object img-circle" width="50">

                    <img src="../../static/picture/avtar-2.jpg" alt="user"
                         class="media-box-object img-circle" width="50">

                                        </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                            <span class="media-box-heading">
                                                <strong>John doe</strong>
                                                <br>
                                                <small class="text-muted">Designer</small>
                                            </span>
                                        </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a href="#" class="media-box">
                                        <span class="pull-right">
                                            <span class="circle circle-danger circle-lg"></span>
                                        </span>
                                    <span class="pull-left">
                                            <!-- Contact avatar-->

                    <img src="${pageContext.request.contextPath}../../static/picture/avtar-3.jpg" alt="user"
                         class="media-box-object img-circle" width="50">

                    <img src="../../static/picture/avtar-3.jpg" alt="user"
                         class="media-box-object img-circle" width="50">

                </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                            <span class="media-box-heading">
                                                <strong>Eluga Smith</strong>
                                                <br>
                                                <small class="text-muted">Designer</small>
                                            </span>
                                        </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a href="#" class="media-box">
                                        <span class="pull-right">
                                            <span class="circle circle-lg"></span>
                                        </span>
                                    <span class="pull-left">
                     <!-- Contact avatar-->

                     <img src="${pageContext.request.contextPath}../../static/picture/avtar-4.jpg" alt="user"
                          class="media-box-object img-circle" width="50">

                     <img src="../../static/picture/avtar-4.jpg" alt="user"
                          class="media-box-object img-circle" width="50">

                                        </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                            <span class="media-box-heading">
                                                <strong>Jonathan Doe</strong>
                                                <br>
                                                <small class="text-muted">Designer</small>
                                            </span>
                                        </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a href="#" class="media-box">
                                        <span class="pull-right">
                                            <span class="circle circle-success circle-lg"></span>
                                        </span>
                                    <span class="pull-left">
                                            <!-- Contact avatar-->

                     <img src="${pageContext.request.contextPath}../../static/picture/avtar-5.jpg" alt="user"
                          class="media-box-object img-circle" width="50">

                     <img src="../../static/picture/avtar-5.jpg" alt="user"
                          class="media-box-object img-circle" width="50">

                 </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                            <span class="media-box-heading">
                                                <strong>Angelina</strong>
                                                <br>
                                                <small class="text-muted">Designer</small>
                                            </span>
                                        </span>
                                </a>
                            </li><!--li end-->
                            <li>
                                <div class=" text-center">
                                    <!-- Optional link to list more users-->
                                    <a href="javascript:void(0);" title="See more contacts" class="btn btn-teal">
                                        Load more..
                                    </a>
                                </div>
                            </li>
                        </ul><!--end sidebar contacts-list-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>
<!--end right side bar panel-->
<!--left navigation start-->
<aside class="float-navigation light-navigation">
    <div class="nano">
        <div class="nano-content">
            <ul class="metisMenu nav" id="menu">
                <li class="nav-heading" id="nav-heading"><span>主导航</span></li>

            </ul>
        </div>
    </div>
</aside>

<iframe class="main-content" name="iframe-content" id="senshiki" name="content_frame" marginwidth=0 marginheight=0
        width=90% height=100% src="" frameborder=0>
</iframe>

</body>
<script src="${pageContext.request.contextPath}../../static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/pace.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jasny-bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.nanoscroller.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/metismenu.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/float-custom.js"></script>
<script>
    let role = <%=user.getRoleId()%>
        console.log(role)
    $.ajax({
        url: "menu/" + role,
        type: "GET",
        success: function (data) {
            console.log(data.data)
            // 构建导航栏和侧边栏
            renderMenu(data.data);
            // 渲染导航栏和侧边栏


        },
        error: function (esx) {
            console.log(esx)
        }
    });

    function renderMenu(data) {
        console.log(data)
        var menuItemHtml = '';
        data.forEach(menu => {
            var subMenuHtml = menu.menus.map(subMenu => `
            <li><a target="iframe-content"   href="${subMenu.href}">${subMenu.menuName}</a></li>
            `).join("");

            menuItemHtml += `
            <li class='active'>
            <a href="#" data-toggle="collapse" data-target="#submenu-${menu.menuId}"  aria-expanded="false"><i class="icon-${menu.icon}"></i>
            ${menu.menuName}<span class="fa arrow"></span>
            </a>
            <ul id="submenu-${menu.menuId}" class="nav-second-level nav collapse" aria-expanded="false">
            ${subMenuHtml}
            </ul>
            </li>
            `;
        });
        $("#nav-heading").after(menuItemHtml);
    }
</script>
</html>